<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <h1>加减油门</h1>
    <input type="number" v-model="percentage" @input="numCheck" />
    <myCircle :percentage="percentage" :color="colors"></myCircle>
    <button @click="sub()">-</button>
    <button @click="add()">+</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import myCircle from "@/components/myCircle.vue";

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
    myCircle,
  },
  data() {
    return {
      percentage: 0,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },
  methods: {
    add() {
      this.percentage += 5;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    sub() {
      this.percentage -= 5;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
    numCheck() {
      if (this.percentage < 0) {
        this.percentage = 0;
      }
      if (this.percentage > 100) {
        this.percentage = 100;
      }
      if (this.percentage == "") {
        this.percentage = 0;
      }
    },
  },
};
</script>